嗨,我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我,進而獲得更多資訊唷!
未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類:React 白話文運動、其他系列
如果想要快速查找其他文章請點選目錄
成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人,
都可以透過 Hogan.tech 嘗試進入程式領域。
前一篇文章介紹了三個名詞,分別是
這一篇則是會手把手建立一個React專案
在建立一個React App 有一切工具是需要先從網路上下載的,這些工具在前幾篇文章都有介紹過。
Node.js裡面有內建的npm 服務,可以提供我們快速下載react套件或是其他的套件。
安裝React的工具Create React App就是需要將JavaScript指令在安裝在電腦上運作
來到官網,右上角可以選擇語言,有支援繁體中文介面
如果要確認是否有安裝成功,不管是Window、MacOS、Linux,皆可以打開終端機(terminal)輸入以下指令,就能知道是否有安裝完成。
node -v
Node環境建置好之後,再來就是建置我們第一個React專案,這邊我偏好使用React官網的教學流程來教學,雖然也有其他快速建置專案的方法。
當Node.js確定安裝成功之後,在terminal輸入以下的指令,就可以在對應的位子建立一個my-app的資料夾,裡面放了對應的檔案以及資料夾。
npx create-react-app my-app
以下是資料夾的結構,my-app資料夾中會有三個資料夾以及三個檔案
其中node_modules裡面會放置各種的套件,透過npm install安裝的套件也會放置在這個資料夾。
package.json則是會針對這個專案進行一些設定。
/my-app
-/public
-/node_modules
-/src
-package.json
-README.md
-package-lock.json
建置完成專案之後,要如何啟動專案呢?
透過下列兩行指令就可以啟動,第一行的指令為進入my-app資料夾,第二行指令為啟動此份專案
cd my-app
npm start
如果成功執行之後,就會有以下畫面
如果成功跑出這個畫面,代表我們已經成功建立自己的第一隻React專案
React白話文運動已經將近十天了,卻才開始建立與啟動React專案。
之所以這麼晚才針對啟動專案做教學,是因為學習React前,就有滿多觀念是相當重要的,包含npm、node.js、webpack、babel都是未來有可能會用到的工具。
未來的文章會繼續講解React相關知識與技術。
如果有任何建議與疑問也歡迎留言!
如果喜歡此系列文章,請不吝於按下喜歡及分享,讓更多人看到唷~